<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
	// request.getContextPath() 以斜线开始，不以斜线结束
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 
	不以'/'开头就是相对路径，以当前页面为基准
	'/'开头就是绝对路径，以上下文为基准
 -->
<link rel="stylesheet"
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
	<!-- 搭建显示页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>SSM-CRUD</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary">新增</button>
				<button class="btn btn-danger">删除</button>
			</div>
		</div>
		<!-- 表格 -->
		<div class="row">
			<table class="table table-hover">
				<tr>
					<th>#</th>
					<th>empName</th>
					<th>gender</th>
					<th>email</th>
					<th>deptName</th>
					<th>操作</th>
				</tr>
				<c:forEach items="${pageInfo.list }" var="emp">
					<tr>
					<td>${emp.empId }</td>
					<td>${emp.empName }</td>
					<td>${emp.gender == "M"?"男":"女" }</td>
					<td>${emp.empId }</td>
					<td>${emp.empId }</td>
					<td>
						<button class="btn btn-primary btn-sm">
							<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
							编辑
						</button>
						<button class="btn btn-danger btn-sm">
							<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
							删除
						</button>
					</td>
				</tr>
				</c:forEach>
			</table>
		</div>
		<!-- 分页 -->
		<div class="row">
			<div class="col-md-6">
				当前${pageInfo.pageNum }页, 总${pageInfo.pages}页, 总共${pageInfo.total } 条记录
			</div>
			<div class="col-md-6">
				<nav aria-label="Page navigation">
				  <ul class="pagination">
				  	<li>
				      <a href="${APP_PATH }/emps?pn=1 ">首页</a>
				    </li>
				    <c:if test="${pageInfo.hasPreviousPage }">
				  	  <li>
					      <a href="${APP_PATH }/emps?pn=${pageInfo.pageNum - 1 } " aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					  </li>
				  	</c:if>
				    <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
				    	<c:if test="${page_Num == pageInfo.pageNum }">
				    		<li class="active"><a href="#">${page_Num }</a></li>
				    	</c:if>
				    	<c:if test="${page_Num != pageInfo.pageNum }">
				    		<li><a href="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>
				    	</c:if>
				    </c:forEach>
				    <c:if test="${pageInfo.hasNextPage }">
					      <li>
						      <a href="${APP_PATH }/emps?pn=${pageInfo.pageNum + 1 } " aria-label="Next">
						        <span aria-hidden="true">&raquo;</span>
						      </a>
						  </li>
				  	</c:if>
				    <li>
				      <a href="${APP_PATH }/emps?pn=${pageInfo.pages } ">末页</a>
				    </li>
				  </ul>
				</nav>
			</div>
		</div>
	</div>
</body>
<script src="${APP_PATH }/static/js/jquery-3.2.1.min.js"></script>
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>